<template>
	<view class="body d-f d-c">
		<search></search>
		<scroll-view class="box flex-1 hh100" scroll-y="true" :scroll-with-animation="false" :enable-back-to-top="true"
			@scrolltolower="loadmore">
			<view class="pl20 pr20 bg-white">
				<up-swiper :list="data.banner" height="376rpx"></up-swiper>
				<view class="mt35">
					<view class="d-s-e mb20">
						<text class="f36">热销品类</text>
						<view class="sub f20 ml10">感受潮流家居</view>
					</view>
					<view class="menu line pb40">
						<view class="item d-c-c d-c" @click="changetabs(item)"
							v-for="(item, index) in data.categoryList.children" :key="index">
							<image :src="item.image" mode="widthFix" class="ww100"></image>
							<text class="f28 mt10" :class="{'active': item.id == data.category_id}">{{ item.name }}</text>
						</view>
					</view>
					<!-- <view class="tabs">
						<up-tabs :list="data.categoryList.children" :current="data.current" lineColor='rgb(238,182,99)'
							activeStyle='font-weight: bold;' @change='changetabs'></up-tabs>
					</view> -->
				</view>
			</view>
			<!-- <view class="pb40" v-if='data.pagination.data.length > 0'>
				<view class="list d-b-c f-w pl30 pr30">
					<view class="item mb20" v-for="(item, index) in data.pagination.data" :key="index"
						@click="store.commit('jump', `/pages/detail/detail?id=${item.id}`)">
						<image :src="item.image" mode="widthFix" class="ww100"></image>
						<view class="bg-white p10">
							<view class="name f26 vertical">{{ item.title }}</view>
						</view>
					</view>
				</view>
				<uni-load-more v-if="data.pagination.total > 0" :status="data.loadStatus" :content-text="{
					contentdown: '点击查看更多',
				}" @tap="loadmore" />
			</view>
			<up-empty marginTop="20vh" mode="list" v-else></up-empty> -->

			<view class="pb20 mt40" v-if='data.pagination.data.length > 0'>
				<view class="list d-b-c f-w pl30 pr30">
					<view class="item mb10" v-for="(item, index) in data.pagination.data" :key="index"
						@click="store.commit('jump', `/pages/detail/detail?id=${item.id}`)">
						<view class="img d-c-c">
							<image :src="item.image" mode="widthFix"></image>

						</view>
						<view class="bg-white p20">
							<view class="name f28" style="margin-top: 10rpx;">{{ item.title }}</view>
							<view class="subs f22 mt10">{{ item.sub }}</view>
						</view>
					</view>
				</view>
				<uni-load-more v-if="data.pagination.total > 0" :status="data.loadStatus" :content-text="{
					contentdown: '点击查看更多',
				}" @tap="loadmore" />
			</view>
			<up-empty marginTop="5vh" mode="list" v-else></up-empty>

		</scroll-view>
	</view>
</template>

<script setup>
import { reactive } from 'vue'
import { onLoad, onReachBottom } from "@dcloudio/uni-app";
import { useStore } from "vuex"
const store = useStore()
const data = reactive({
	categoryList: [],
	activeMenu: '0',
	pagination: {
		data: [],
		current_page: 1,
		total: 1,
		last_page: 1,
	},
	loadStatus: '',

	category_id: 0,
	banner: [
		'/static/image/icon4.png',
		'/static/image/icon4.png',
		'/static/image/icon4.png',
		'/static/image/icon4.png',
	],
	menu: [{
		icon: "/static/image/icon3.png",
		name: "全部"
	}, {
		icon: "/static/image/icon3.png",
		name: "沙发"
	}, {
		icon: "/static/image/icon3.png",
		name: "餐桌椅"
	}, {
		icon: "/static/image/icon3.png",
		name: "茶几"
	}, {
		icon: "/static/image/icon3.png",
		name: "床"
	}, {
		icon: "/static/image/icon3.png",
		name: "床垫"
	}, {
		icon: "/static/image/icon3.png",
		name: "电视柜"
	}, {
		icon: "/static/image/icon3.png",
		name: "厨电"
	}, {
		icon: "/static/image/icon3.png",
		name: "家电"
	}, {
		icon: "/static/image/icon3.png",
		name: "建材"
	}],
	current: 0,
	status: "loadmore",
	banner: [],
})

function setAct(i) {
	data.mindex = i
}

function setAct1(name, i) {
	data[name] = i
}
function changetabs(item) {
	data.pagination = {
		data: [],
		current_page: 1,
		total: 1,
		last_page: 1,
	};
	data.category_id = item.id;
	getGoodsList(item.id)
}
async function getFiltrate(category_id) {
	const res = await store.dispatch('request', {
		url: store.state.api.filtrate,
		data: {
			category_id: category_id,
		}
	})
	if (res.code == 1) {

	}
}
async function getBanner() {
	const res = await store.dispatch('request', {
		url: store.state.api.category.banner,
		data: {
			id: 32,
		}
	})
	if (res.code == 1) {
		data.banner = res.data;
		uni.$mpShare = {
			title: '成品家具馆',
			path: '/pages/index/furniture',
			imageUrl: data.banner[0],
		};
	}
}
async function getList() {
	const res = await store.dispatch('request', {
		url: store.state.api.category.index,
		data: {
			id: 32,
			is_all: 1,
		}
	})
	if (res.code == 1) {
		data.categoryList = res.data;
		uni.$mpShare = {
			title: '成品家具馆',
			path: '/pages/index/furniture',
			imageUrl: data.categoryList.children[0].image,
		};
	}
}
async function getGoodsList(id, page = 1, list_rows = 10) {
	data.loadStatus = 'loading';
	const res = await store.dispatch('request', {
		url: store.state.api.goods.index,
		data: {
			category_id: id || 32,
			list_rows,
			page,
		}
	})
	if (res.code == 1) {
		let couponList = data.pagination.data.concat(res.data.data);
		data.pagination = {
			...res.data,
			data: couponList,
		};

		if (data.pagination.current_page < data.pagination.last_page) {
			data.loadStatus = 'more';
		} else {
			data.loadStatus = 'noMore';
		}
	}

}
onLoad(async (options) => {
	await getList(options);
	getBanner();
	if (data.categoryList.style === 'first_one' || data.categoryList.style === 'first_two') {
		getGoodsList(data.categoryList.children[0].id);
		getFiltrate(data.categoryList.children[0].id);
	}

});
// 加载更多
function loadmore() {
	if (data.loadStatus !== 'noMore') {
		getGoodsList(
			data.category_id,
			data.pagination.current_page + 1,
		);
	}
}
onReachBottom(() => {
	loadmore();
});
</script>

<style scoped lang="scss">
.body {
	height: 100vh;
}

.box {
	height: 1px;
}

.list {
	.item {
		border: 1px solid #ccc;
		width: calc(50% - 5rpx);

		.img {
			height: 200rpx;
			position: relative;

			image {
				// width: 100rpx;
			}

			.tags {
				position: absolute;
				bottom: 20rpx;
				left: 10rpx;
			}
		}

		.subs {
			color: #FBE5CB;
		}
	}
}

.menu {
	display: grid;
	grid-template-columns: repeat(5, auto);
	grid-gap: 35rpx;
	justify-content: space-between;

	// align-content: space-between;
	.item {
		width: 100rpx;
	}
}
.active {
		// background-color: rgb(255, 0, 43);
		color:  rgb(255, 0, 43);
	}
</style>